<template>
  <div class="echarts h-full">
    <ECharts v-if="option" :option="option" :id="`Gauge` + id" />
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  seriesData: {
    type: null,
    default: "",
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { id, params, seriesData } = toRefs(props);

const option = ref();

// 初始化仪表盘
watch(
  () => params.value,
  (newVal) => {
    setOptions(0);
  },
  {
    deep: true,
    immediate: true,
  }
);

// 仪表盘数据变更
watch(
  () => seriesData.value,
  (newVal) => {
    setOptions(newVal);
  },
  {
    deep: true,
  }
);

function setOptions(newVal: any) {
  option.value = {
    title: {
      text: params.value.parameterDesc,
      bottom: 10,
      left: "center",
      textStyle: {
        fontWeight: "normal",
        fontSize: 14,
      },
    },
    series: [
      {
        name: "",
        type: "gauge",
        center: ["50%", "55%"],
        startAngle: 200,
        endAngle: -20,
        min: getMinValue(),
        max: getMaxValue(),
        radius: "90%",
        progress: {
          show: true,
        },
        pointer: {
          // show: false,
          width: 4,
          length: 35,
          offsetCenter: [0, 0],
        },
        splitLine: {
          length: 5,
          distance: 10,
          lineStyle: {
            width: 1,
            color: "#999",
          },
        },
        splitNumber: filterSplitNumber(),
        axisLabel: {
          color: "#999",
          fontSize: 10,
          fontFamily: "DINLight",
          formatter: function (value: number) {
            return value.toFixed(0);
          },
        },
        detail: {
          valueAnimation: true,
          formatter: `{value}${params.value.measurementUnit ?? ""}`,
          fontFamily: "DINPro",
          fontSize: 16,
          offsetCenter: ["0%", "42%"],
        },
        data: [
          {
            value: newVal,
            name: "",
            title: {
              fontSize: 14,
              // padding: 50,
              offsetCenter: [0, "22%"],
            },
          },
        ],
      },
    ],
  };
}
onMounted(() => {
  // setOptions("");
});

// 获取仪表盘下线
function getMinValue() {
  if (
    params.value?.upperLimitValue &&
    params.value?.upperLimitValue === params.value?.lowerLimitValue
  ) {
    return 0;
  } else if (params.value?.lowerLimitValue) {
    return params.value?.lowerLimitValue;
  } else {
    return 0;
  }
}

// 获取仪表盘上线
function getMaxValue() {
  if (
    params.value?.upperLimitValue &&
    params.value?.upperLimitValue === params.value?.lowerLimitValue
  ) {
    return 100;
  } else if (params.value?.upperLimitValue) {
    return params.value?.upperLimitValue;
  } else {
    return 100;
  }
}

// 处理仪表盘的自定义刻度数量
function filterSplitNumber() {
  if (
    params.value?.upperLimitValue &&
    params.value?.upperLimitValue.toString().length > 3
  ) {
    return 5;
  } else {
    return 10;
  }
}
</script>

<style lang="scss" scoped>
.echarts {
  // width: 50%;
  height: 180px;
  // float: left;
  border-radius: 6px;
  // box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.04);
}
</style>
